<template>
    <div>
        <div class="content white-block">
            <div class="toolbar">
                <div class="provider">
                    <el-select v-model="nameValue" placeholder="请选择">
                        <el-option
                            v-for="item in nameOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-model="APIAuditInput" placeholder="请输入" class="input ml10"
                              @keyup.enter="APIAuditSystem(1)"></el-input>
                    <span class="state mr10" name="">状态</span>
                    <el-select v-model="statusVal" placeholder="请选择">
                        <el-option
                            v-for="item in statusOpt"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button type="primary" class="ml10" @click="APIAuditSystem(1)">查询</el-button>
                </div>
            </div>
            <div class="table atomicTable mt20">
                <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                               v-loading="loading"
                               @cell-mouse-enter="handClick"
                               @row-click="handleClick"
                               class="mt20">
                    <template slot="status" slot-scope="scope">
                        <span v-if="scope.row.status == 1">待审核</span>
                        <span v-if="scope.row.status == 2">待发布</span>
                        <span v-if="scope.row.status == 3">已发布</span>
                    </template>
                    <template slot="operation" slot-scope="scope">
                        <!--                        <el-link type="primary" :underline="false" class="mr10"-->
                        <!--                                 @click="APIDetails(scope.row, true, true)">详情-->
                        <!--                        </el-link>-->
                        <el-link type="primary" :underline="false" class="mr10" @click.stop
                                 @click="throughButton(scope.row)"
                                 v-if="scope.row.status == '1'">审核通过
                        </el-link>
                        <el-link type="primary" :underline="false" class="mr10" @click.stop
                                 @click="fallbackButton(scope.row)"
                                 v-if="scope.row.status == '1'">回退
                        </el-link>
                        <el-link type="primary" :underline="false" class="mr10" @click.stop
                                 @click="releaseButton(scope.row)"
                                 v-if="scope.row.status == '2'">发布
                        </el-link>
                        <el-link type="primary" :underline="false" class="mr10" @click.stop
                                 @click="invalidButton(scope.row)"
                                 v-if="scope.row.status == '3'">作废
                        </el-link>
                    </template>
                </table-example>
                <page :data="APIAuditPage" v-if="APIAuditPage" class="mt30 page" @jumpPage="APIAuditSystem"></page>
            </div>
        </div>
        <el-drawer
            v-if=serListDetailsFlag
            :visible.sync="serListDetailsFlag"
            direction="rtl"
            size="70%">
            <new-drawer :id.sync="id" :detailsId.sync="detailsId" :tag.sync="tag"
                        @closeDrawer="closeDrawer"></new-drawer>
        </el-drawer>
        <!-- <transition name="slide">
            <router-view @upload="getAPIAuditData"></router-view>
        </transition> -->
    </div>
</template>

<script>
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import newDrawer from '../../page/monitoring/new-api-editor'

    export default {
        data() {
            return {
                tableData: [],
                header: [
                    {
                        prop: 'servname',
                        label: '服务名称',
                        minWidth: '15%',
                        align: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'servcode',
                        label: '服务编码',
                        minWidth: '15%',
                        align: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'servversion',
                        label: '服务版本',
                        minWidth: '10%',
                        align: 'left'
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        minWidth: '10%',
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: '10%',
                        align: 'center'
                    }
                ],
                slotColumns: ['operation', 'status'],
                currentPage: 1,
                pageSize: 10,
                nameOptions: [
                    {
                        value: '1',
                        label: '服务名称'
                    }, {
                        value: '2',
                        label: '服务编码'
                    }
                ],
                nameValue: '1',
                APIAuditInput: '',
                statusOpt: [
                    {
                        value: '5',
                        label: '全部'
                    }, {
                        value: '1',
                        label: '待审核'
                    }, {
                        value: '2',
                        label: '待发布'
                    }, {
                        value: '3',
                        label: '已发布'
                    }
                ], // 状态
                statusVal: '5',
                APIAuditPage: null,
                serListDetailsFlag: false,
                id: null,
                detailsId: null,
                tag: null,
                loading: false
            }
        },
        created() {
            let lett = this
            document.onkeydown = function (e) {
                let key = window.event.keyCode
                if (key === 13) {
                    lett.APIAuditSystem(1)
                }
            }
        },
        mounted() {
            this.getAPIAuditData()
        },
        methods: {
            // 获取API审核页面的数据
            getAPIAuditData() {
                this.loading = true
                this.$http.get('/APIEdit/queryPageMess', {
                    current: this.currentPage,
                    message: this.APIAuditInput,
                    size: this.pageSize,
                    type: this.nameValue,
                    status: this.statusVal
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        for (let i = 0; i < result.data.records.length; i++) {
                            // 删除状态为编辑中和已作废的数据
                            if (!result.data.records[i].status || result.data.records[i].status === '0' || result.data.records[i].status === '4') {
                                result.data.records.splice(i, 1)
                            }
                        }
                        this.APIAuditPage = result.data
                        this.tableData = result.data.records
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 分页
            APIAuditSystem(val) {
                this.currentPage = val
                this.getAPIAuditData()
            },
            // 审核通过
            throughButton(row) {
                this.loading = true
                this.$http.get('/APIEdit/operateApiPass', {
                    id: row.id
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.$message({
                            type: 'success',
                            message: result.data
                        })
                        this.getAPIAuditData()
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 回退
            fallbackButton(row) {
                this.loading = true
                this.$http.get('/APIEdit/operateApiGoBack', {
                    id: row.id
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.$message({
                            type: 'success',
                            message: result.data
                        })
                        this.getAPIAuditData()
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 发布
            releaseButton(row) {
                this.loading = true
                this.$http.get('/APIEdit/editApiOne', {
                    id: row.id
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.$message({
                            type: 'success',
                            message: result.data
                        })
                        this.getAPIAuditData()
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 作废
            invalidButton(row) {
                this.loading = true
                this.$http.get('/APIEdit/operateApiCancle', {
                    id: row.id
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.$message({
                            type: 'success',
                            message: result.data
                        })
                        this.getAPIAuditData()
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 详情按钮
            // APIDetails(row, id, tag) {
            //     // 页面跳转
            //     // this.$router.push({
            //     //     path: this.$route.path + '/newAPIEditor',
            //     //     query: {
            //     //         id: id,
            //     //         detailsId: row.id
            //     //     }
            //     // })
            //     this.id = id
            //     this.detailsId = row.id
            //     this.tag = tag
            //     this.serListDetailsFlag = true
            // },
            // 子传父关闭抽屉
            closeDrawer() {
                this.serListDetailsFlag = false
            },

            // 表格点击事件
            handleClick(row, id, tag) {
                this.id = id
                this.detailsId = row.id
                this.tag = tag
                this.serListDetailsFlag = true
            },

            // 表格鼠标移入事件
            handClick(row) {

            }
        },
        components: {
            tableExample,
            page,
            newDrawer
        }
    }
</script>

<style scoped lang="less">
    .content {
        width: 100%;

        .provider {
            span {
                margin-left: .1rem;
            }
        }
    }

    .details {
        width: 100%;
        position: relative;

        .icon {
            i {
                font-size: .3rem;
                position: absolute;
                right: -0.1rem;
                top: -0.1rem;
                color: #999;
            }
        }

        .detailsBox {
            height: 100%;
            margin-top: .2rem;

            .btn {
                margin-right: 1rem;
            }

            .detailsMsg {
                span {
                    color: #999;
                    width: 1.5rem;
                    display: inline-block;
                    text-align: right;
                }

                p {
                    display: inline-block;
                    line-height: .5rem;
                }
            }

            .deployBox {
                width: 100%;

                li {
                    background-color: #eee;
                    display: inline-block;
                    height: 3rem;
                    width: 25%;
                    margin-right: .3rem;
                    margin-bottom: .3rem;
                    margin-left: .5rem;
                    text-align: center;

                    .img {
                        width: 1rem;
                        height: 1rem;
                        // background-color: pink;
                        margin-left: 37%;
                        margin-top: .5rem;
                    }

                    span {
                        display: inline-block;
                        margin-top: .3rem;
                    }
                }
            }
        }
    }
</style>
